Sencha Touch এর Built-in Components (Buttons, Panels, Lists, Forms)

Sencha Touch এর পরিচিতি

Sencha Touch একটি শক্তিশালী এবং আধুনিক JavaScript ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। এটি HTML5, CSS3, এবং JavaScript ব্যবহার করে মোবাইল-ফার্স্ট ওয়েব অ্যাপ্লিকেশন ডেভেলপ করার জন্য ডিজাইন করা হয়েছে। Sencha Touch ফ্রেমওয়ার্কে অনেক ধরনের Built-in Components প্রদান করা হয়েছে, যেগুলি মোবাইল অ্যাপ্লিকেশন তৈরিতে দ্রুততা এবং উন্নত পারফরম্যান্স নিশ্চিত করে।

Sencha Touch এর এই Built-in Components মোবাইল ইউজার ইন্টারফেস তৈরির ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা রাখে। এর মাধ্যমে মোবাইল অ্যাপ্লিকেশন তৈরি করা অনেক সহজ হয় এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত হয়। এই টিউটোরিয়ালে, আমরা Sencha Touch এর কিছু গুরুত্বপূর্ণ Built-in Components যেমন Buttons, Panels, Lists, এবং Forms নিয়ে আলোচনা করব।

১. Buttons

Buttons হল UI কম্পোনেন্ট যা ব্যবহারকারীদের অ্যাপ্লিকেশনের মধ্যে কোনো নির্দিষ্ট কাজ সম্পাদন করার জন্য ব্যবহৃত হয়। Sencha Touch এ বিভিন্ন ধরনের Buttons প্রদান করা হয় যা বিভিন্ন ডিজাইন এবং স্টাইলের মধ্যে তৈরি করা যেতে পারে।

Button Component এর উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('Button Clicked!');
    }
});

এখানে, একটি Button তৈরি করা হয়েছে যার টেক্সট "Click Me" এবং যখন ব্যবহারকারী বাটনে ক্লিক করবে, তখন একটি এলার্ট মেসেজ প্রদর্শিত হবে।

Button এর কাস্টমাইজেশন:

Ext.create('Ext.Button', {
    text: 'Submit',
    iconCls: 'x-fa fa-send',
    ui: 'action', // Button Style
    renderTo: Ext.getBody(),
    handler: function() {
        alert('Form Submitted!');
    }
});

এখানে, iconCls ব্যবহার করে বাটনের আইকন যোগ করা হয়েছে এবং ui: 'action' দিয়ে বাটনের স্টাইল পরিবর্তন করা হয়েছে।

২. Panels

Panels হল UI কম্পোনেন্ট যা সাধারণত একটি কনটেইনার হিসেবে কাজ করে, যেখানে অন্যান্য উপাদান বা কম্পোনেন্ট রাখা হয়। Sencha Touch এ Panels খুবই শক্তিশালী কনটেইনার এবং এটি অ্যাপ্লিকেশনের বিভিন্ন ভিউ তৈরি করতে ব্যবহৃত হয়।

Panel Component এর উদাহরণ:

Ext.create('Ext.Panel', {
    title: 'My Panel',
    html: '<p>This is a simple panel.</p>',
    fullscreen: true
});

এখানে একটি Panel তৈরি করা হয়েছে যেখানে একটি টাইটেল এবং HTML কনটেন্ট রয়েছে। fullscreen: true দ্বারা প্যানেলটি পুরো স্ক্রীন জুড়ে প্রসারিত করা হয়েছে।

Panel এর কাস্টমাইজেশন:

Ext.create('Ext.Panel', {
    title: 'User Info',
    items: [
        {
            xtype: 'textfield',
            label: 'Name'
        },
        {
            xtype: 'textfield',
            label: 'Email'
        }
    ],
    renderTo: Ext.getBody()
});

এখানে, Panel এর মধ্যে textField কম্পোনেন্ট ব্যবহার করা হয়েছে এবং items এর মাধ্যমে প্যানেলে কয়েকটি উপাদান যুক্ত করা হয়েছে।

৩. Lists

Lists হল এমন একটি কম্পোনেন্ট যা তালিকা আকারে ডেটা প্রদর্শন করতে ব্যবহৃত হয়। Sencha Touch এ তালিকা তৈরি করা খুবই সহজ এবং এটি ডেটা প্রদর্শন করার জন্য এক্সটেনসিভ কাস্টমাইজেশন অপশন প্রদান করে।

List Component এর উদাহরণ:

Ext.create('Ext.List', {
    store: {
        fields: ['name'],
        data: [
            {name: 'John'},
            {name: 'Jane'},
            {name: 'Joe'}
        ]
    },
    itemTpl: '{name}',
    renderTo: Ext.getBody()
});

এখানে, একটি List তৈরি করা হয়েছে যা একটি store থেকে ডেটা নিয়ে তালিকা আকারে প্রদর্শন করবে। itemTpl দিয়ে তালিকার আইটেমের টেমপ্লেট তৈরি করা হয়েছে।

List এর কাস্টমাইজেশন:

Ext.create('Ext.List', {
    store: {
        fields: ['name', 'email'],
        data: [
            {name: 'John', email: 'john@example.com'},
            {name: 'Jane', email: 'jane@example.com'}
        ]
    },
    itemTpl: '<div>{name} - {email}</div>',
    fullscreen: true
});

এখানে, List এর আইটেম টেমপ্লেটে নাম এবং ইমেইল শো করানো হয়েছে।

৪. Forms

Forms হল UI কম্পোনেন্ট যা ব্যবহারকারীদের ডেটা ইনপুট করার জন্য ব্যবহৃত হয়। Sencha Touch এ Forms খুবই শক্তিশালী এবং এটি বিভিন্ন ফর্ম ফিল্ড যেমন TextField, Checkbox, Radio, Selectfield ইত্যাদি ব্যবহার করে ডেটা ইনপুট নিতে সহায়তা করে।

Form Component এর উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Contact Form',
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        },
        {
            xtype: 'emailfield',
            name: 'email',
            label: 'Email'
        },
        {
            xtype: 'textareafield',
            name: 'message',
            label: 'Message'
        },
        {
            xtype: 'button',
            text: 'Submit',
            handler: function() {
                alert('Form Submitted!');
            }
        }
    ],
    renderTo: Ext.getBody()
});

এখানে, একটি Form তৈরি করা হয়েছে যেখানে TextField, EmailField, এবং TextAreaField ব্যবহার করা হয়েছে। একটি Submit Button ও আছে যা ফর্মটি সাবমিট করার জন্য ব্যবহৃত হয়।

Form এর কাস্টমাইজেশন:

Ext.create('Ext.form.Panel', {
    title: 'Registration Form',
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            label: 'Username',
            required: true
        },
        {
            xtype: 'passwordfield',
            name: 'password',
            label: 'Password',
            required: true
        },
        {
            xtype: 'checkboxfield',
            name: 'terms',
            label: 'Accept Terms and Conditions',
            checked: true
        }
    ],
    renderTo: Ext.getBody()
});

এখানে, Form এর মধ্যে CheckboxField এবং PasswordField কাস্টমাইজ করা হয়েছে।

সারাংশ

Sencha Touch একটি শক্তিশালী ফ্রেমওয়ার্ক যা মোবাইল ওয়েব অ্যাপ্লিকেশন ডেভেলপ করার জন্য ব্যবহৃত হয়। এর Built-in Components যেমন Buttons, Panels, Lists, এবং Forms মোবাইল অ্যাপ্লিকেশন তৈরি করা আরও সহজ করে তোলে। এসব কম্পোনেন্ট বিভিন্ন ডেটা ইনপুট এবং ডিসপ্লে সিস্টেম তৈরি করতে সহায়ক, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। Sencha Touch-এর এই কম্পোনেন্টগুলি কাস্টমাইজেশন এবং এক্সটেনসিভ কনফিগারেশন অপশন প্রদান করে, যাতে আপনি আপনার অ্যাপ্লিকেশন এর ডিজাইন এবং কার্যকারিতা সঠিকভাবে কাস্টমাইজ করতে পারেন।